<template>
  <div class="index_box" ref="index_box" @scroll="indexScroll($event)" v-if="res">
    <BHeader/>
    <div class="pos_box">
      <!-- 轮播图以及推荐区域开始 -->
      <div class="cate_banner">
        <div class="cate_links">
          <div class="cate_link fontChange">
            <img v-lazy="'/img/cate_link1.png'" alt="" />
            首页
          </div>
          <div class="cate_link fontChange">
            <img v-lazy="'/img/cate_link2.png'" alt="" />
            动态
          </div>
          <div class="cate_link fontChange">
            <img v-lazy="'/img/cate_link3.png'" alt="" />
            热门
          </div>
          <div class="cate_link fontChange">
            <img v-lazy="'/img/cate_link4.png'" alt="" />
            频道
          </div>
        </div>
        <div class="cate_categories">
          <ul>
            <li v-for="(item, index) in res.bCate" :key="index" class="fontChange">
              {{ item.title }}<span v-if="item.num">{{ item.num }}</span>
            </li>
          </ul>
        </div>
        <div class="cate_type">
          <div class="type_box fontChange">
            <img v-lazy="'/img/cate_special.png'" alt="" class="type_img" />
            <span>专栏</span>
          </div>
          <div class="type_box fontChange">
            <img v-lazy="'/img/cate_act.png'" alt="" class="type_img" />
            <span>活动</span>
          </div>
          <div class="type_box fontChange">
            <img v-lazy="'/img/cate_blackhouse.png'" alt="" class="type_img" />
            <span>小黑屋</span>
          </div>
          <div class="type_box fontChange">
            <img v-lazy="'/img/cate_live.png'" alt="" class="type_img" />
            <span>直播</span>
          </div>
          <div class="type_box fontChange">
            <img v-lazy="'/img/cate_class.png'" alt="" class="type_img" />
            <span>课堂</span>
          </div>
          <div class="type_box fontChange">
            <img v-lazy="'/img/cate_hotsong.png'" alt="" class="type_img" />
            <span>新歌热搜</span>
          </div>
        </div>
      </div>
      <!-- 轮播图以及推荐结束 -->
      <SwipeBanner :data="res.bRcmd" />
      <!-- 推广开始-->
      <div class="propaganda" id="#prop">
        <div class="block_area">
          <div class="block_title">
            <img class="block_pic" v-lazy="'/img/tg.png'" alt="" />
            <span>推广</span>
            <img class="hot_pic" v-lazy="'/img/hot.png'" alt="" />
            <p>无限搞笑公司发年终奖啦！</p>
          </div>
          <div class="block_item">
            <div
              class="video_container"
              v-for="(item, index) in res.bAdvs"
              :key="index"
               @click="jumpToVideo('三天三夜','8707081')"
            >
              <div class="img">
                <img v-lazy="item.img + '.jpg'" alt="" />
              </div>
              <span class="title" :title="item.title">{{ item.title }} </span>
              <div class="up">{{ item.up }}</div>
            </div>
          </div>
        </div>
        <div class="sub_banner">
          <a class="his_list">观看列表</a>
          <img
            class="sub_img"
            v-lazy="'http://www.sword9991.cn/img/72fddb3096866a5451082f7b103d770d22686f0e.jpg'"
            alt=""
          />
        </div>
      </div>
      <!-- 推广结束-->

      <!-- 赛事开始 -->
      <div class="race" id="#race">
        <div class="block_area">
          <div class="block_title">
            <img class="block_pic" v-lazy="'/img/Races.png'" alt="" />
            <span>赛事</span>
            <!-- <img class="hot_pic" v-lazy="'" alt=""> -->
            <p></p>
          </div>
          <div class="block_item">
            <div
              class="video_container"
              v-for="(item, index) in res.bRace"
              :key="index"
               @click="jumpToVideo('三天三夜','8707081')"
            >
              <div class="img">
                <img v-lazy="item.img" alt="" />
              </div>
              <span class="title" :title="item.title">{{ item.title }}</span>

              <div class="video_info">
                <p class="info">
                  <img v-lazy="'/img/play.png'" alt="" />{{ item.play }}
                </p>
                <p class="awe_num">
                  <img v-lazy="'/img/dianzan_0.png'" alt="" />{{ 4 - index }}万
                </p>
                <img v-lazy="'/img/replay.png'" alt="" class="replay" />
              </div>
            </div>
          </div>
        </div>
        <div class="sub_banner">
          <img
            class="sub_only_img"
            v-lazy="'http://www.sword9991.cn/img/59fc1186bffad69389fb400cc34501bf2dbd024b.jpg@320w_184h_1c_100q.jpg'"
            alt=""
          />
        </div>
      </div>
      <!-- 赛事结束 -->

      <!-- 广告 -->
      <div class="ads">
        <img
          v-lazy="'http://www.sword9991.cn/img/dd1ed16b1dec846764d7db6f439ce442.jpg'"
          alt=""
          class="ad"
        />
        <!-- <img v-lazy="'" alt="" class="ad_icon" /> -->
      </div>
      <!-- 直播开始 -->
      <div class="live" id="#live">
        <div class="block_area">
          <div class="block_title">
            <img class="block_pic" v-lazy="'/img/living.png'" alt="" />
            <span>正在直播</span>
            <!-- <img class="hot_pic" v-lazy="'" alt=""> -->
            <p>当前共有 37027 个在线直播</p>
          </div>
          <div class="block_item">
            <div
              class="video_container"
              v-for="(item, index) in res.bLive"
              :key="index"
               @click="jumpToVideo('三天三夜','8707081')"
            >
              <div class="img">
                <img v-lazy="item.img" alt="" />
              </div>
              <div class="live_text">
                <div class="head">
                  <img v-lazy="item.head" alt="" />
                </div>
                <div class="text">
                  <a href="" class="name fontChange" :title="item.name">{{ item.name }}</a>
                  <p class="desc" :title="item.desc">{{ item.desc }}</p>
                  <p class="tag">{{ item.tag }}</p>
                </div>
              </div>
              <div class="video_info">
                <p class="info">
                  <img v-lazy="'/img/live_view.png'" alt="" />{{ item.count }}
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="sub_banner">
          <div class="sub_tab">
            <div
              :class="{ tab: true, tab_on: l_t_cur == 1 }"
              @click="l_t_cur = 1"
            >
              直播排行
            </div>
            <div
              :class="{ tab: true, tab_on: l_t_cur == 2 }"
              @click="l_t_cur = 2"
            >
              关注的主播
            </div>
            <div
              :class="{ tab: true, tab_on: l_t_cur == 3 }"
              @click="l_t_cur = 3"
            >
              为你推荐
            </div>
          </div>
          <div class="container">
            <div class="tab_contain1" v-show="l_t_cur == 1">
              <div class="ranks"  v-for="i in 7" :key="i">
                <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                  <div :class="{num_on:i<=3,num_off:i>3}">{{i}}</div>
                  <img v-lazy="'/img/head4.webp'" alt="" class="r_head" />
                  <div class="txt">
                    <p class="p1 fontChange fontChange">老实憨厚的子衿</p>
                    <p class="p2">九点开播</p>
                  </div>
                </div>
                <div class="people_num">
                  <i class="el-icon-user"></i>
                  <span>69.1万</span>
                </div>
              </div>
            </div>
            <div class="tab_contain2" v-show="l_t_cur == 2">
              <div class="subscribe">
                <p v-if="my_subscribe == ''" class="my_sub">没有数据(-_-#)</p>
                <div v-else class="my_sub"></div>
              </div>
            </div>
            <div class="tab_contain3" v-show="l_t_cur == 3">
              <div class="banner_swiper">
                <swiper class="swiper" :options="swiperOption">
                  <swiper-slide class="s_slide" @click="jumpToVideo('三天三夜','8707081')">
                    <img v-lazy="'/img/swp_live1.webp'" alt="" class="swiper_img" />
                    <div class="s_text">撑住！就一定可以！</div>
                  </swiper-slide>
                  <swiper-slide class="s_slide" @click="jumpToVideo('三天三夜','8707081')">
                    <img v-lazy="'/img/swp_live2.webp'" alt="" class="swiper_img" />
                    <div class="s_text">说说那些悬疑片里的“神”编剧...</div>
                  </swiper-slide>

                  <div class="swiper-pagination" slot="pagination"></div>
                </swiper>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 直播结束 -->

      <!-- 动画开始 -->
      <div class="cartoon" id="#cartoon">
        <div class="block_area">
          <div class="block_title">
            <img class="block_pic" v-lazy="'/img/cartoon.png'" alt="" />
            <span>动画</span>
            <!-- <img class="hot_pic" v-lazy="'" alt=""> -->
            <p></p>
          </div>
          <block-item :data="res.bCartoon" />
        </div>
        <div class="sub_banner">
          <div class="sub_tab">
            <div>
              <p>排行榜</p>
            </div>
          </div>
          <div class="container">
            <div class="tab_contain1">
              <div class="ranks">
                <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                  <div class="num_on">1</div>
                  <img v-lazy="'/img/cartoon_rank1.webp'" alt="" class="r_head" />
                  <div class="txt">
                    <p class="p1 fontChange">绊爱的重大通知</p>
                    <p class="p2">综合得分: 194.6万</p>
                  </div>
                </div>
              </div>
              <div class="ranks">
                <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                  <div class="num_off">2</div>
                  <div class="txt">
                    <p class="p1 fontChange">
                      新作高产！老番完结！2022年1月新番导视！【泛式】
                    </p>
                  </div>
                </div>
              </div>
              <div class="ranks">
                <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                  <div class="num_off">3</div>
                  <div class="txt">
                    <p class="p1 fontChange">老实憨厚的子衿</p>
                  </div>
                </div>
              </div>
              <div class="ranks">
                <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                  <div class="num_off">4</div>
                  <div class="txt">
                    <p class="p1 fontChange">老实憨厚的子衿</p>
                  </div>
                </div>
              </div>
              <div class="ranks">
                <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                  <div class="num_off">5</div>
                  <div class="txt">
                    <p class="p1 fontChange">老实憨厚的子衿</p>
                  </div>
                </div>
              </div>
              <div class="ranks">
                <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                  <div class="num_off">6</div>
                  <div class="txt">
                    <p class="p1 fontChange">老实憨厚的子衿</p>
                  </div>
                </div>
              </div>
              <div class="ranks">
                <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                  <div class="num_off">7</div>
                  <div class="txt">
                    <p class="p1 fontChange">老实憨厚的子衿</p>
                  </div>
                </div>
              </div>
              <div class="ranks">
                <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                  <div class="num_off">8</div>
                  <div class="txt">
                    <p class="p1 fontChange">老实憨厚的子衿</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 卡通结束 -->

      <!-- 广告 -->
      <div class="ads">
        <img v-lazy="'img/ad2.jpg'" alt="" class="ad" />
        <!-- <img v-lazy="'" alt="" class="ad_icon" /> -->
      </div>

      <!-- 番剧动态开始 -->
      <div class="series" id="#series">
        <div class="cartoon">
          <div class="block_area">
            <div class="block_title">
              <img class="block_pic" v-lazy="'/img/series.png'" alt="" />
              <span>番剧动态</span>
              <!-- <img class="hot_pic" v-lazy="'" alt=""> -->
              <p></p>
            </div>
            <BlockItem :data="res.bSeries" />
          </div>
          <div class="sub_banner">
            <div class="sub_tab">
              <div>
                <p>排行榜</p>
              </div>
            </div>
            <div class="container">
              <div class="tab_contain1">
                <div class="ranks">
                  <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                    <div class="num_on">1</div>
                    <img v-lazy="'/img/music_rank1.webp'" alt="" class="r_head" />
                    <div class="txt">
                      <p class="p1 fontChange r_1">【探窗】开口跪！单曲循环停不下来了……</p>
                      <p class="p2">综合得分: 123.7万</p>
                    </div>
                  </div>
                </div>
                <div class="ranks">
                  <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                    <div class="num_off">2</div>
                    <div class="txt">
                      <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                    </div>
                  </div>
                </div>
                <div class="ranks">
                  <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                    <div class="num_off">3</div>
                    <div class="txt">
                      <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                    </div>
                  </div>
                </div>
                <div class="ranks">
                  <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                    <div class="num_off">4</div>
                    <div class="txt">
                      <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                    </div>
                  </div>
                </div>
                <div class="ranks">
                  <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                    <div class="num_off">5</div>
                    <div class="txt">
                      <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                    </div>
                  </div>
                </div>
                <div class="ranks">
                  <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                    <div class="num_off">6</div>
                    <div class="txt">
                      <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                    </div>
                  </div>
                </div>
                <div class="ranks">
                  <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                    <div class="num_off">7</div>
                    <div class="txt">
                      <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                    </div>
                  </div>
                </div>
                <div class="ranks">
                  <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                    <div class="num_off">8</div>
                    <div class="txt">
                      <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 番剧动态结束 -->

      <!-- 国产原创 -->
      <div class="origin" id="#origin">
        <div class="cartoon">
          <div class="block_area">
            <div class="block_title">
              <img class="block_pic" v-lazy="'/img/cartoon.png'" alt="" />
              <span>国产原创</span>
              <!-- <img class="hot_pic" v-lazy="'" alt=""> -->
              <p></p>
            </div>
            <block-item :data="res.bOrigin" />
          </div>
          <div class="sub_banner">
            <div class="sub_tab">
              <div>
                <p>排行榜</p>
              </div>
            </div>
            <div class="container">
              <div class="tab_contain1">
                <div class="ranks">
                  <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                    <div class="num_on">1</div>
                    <img v-lazy="'/img/origin_only_1.webp'" alt="" class="r_head" />
                    <div class="txt">
                      <p class="p1 fontChange r_1">
                        【梦幻桃夭夭】超丝滑定格动画，夭夭翩跹舞，惊动芙蓉城
                      </p>
                      <p class="p2">综合得分: 57.7万</p>
                    </div>
                  </div>
                </div>
                <div class="ranks">
                  <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                    <div class="num_off">2</div>
                    <div class="txt">
                      <p class="p1 fontChange">
                        新作高产！老番完结！2022年1月新番导视！【泛式】
                      </p>
                    </div>
                  </div>
                </div>
                <div class="ranks">
                  <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                    <div class="num_off">3</div>
                    <div class="txt">
                      <p class="p1 fontChange">老实憨厚的子衿</p>
                    </div>
                  </div>
                </div>
                <div class="ranks">
                  <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                    <div class="num_off">4</div>
                    <div class="txt">
                      <p class="p1 fontChange">老实憨厚的子衿</p>
                    </div>
                  </div>
                </div>
                <div class="ranks">
                  <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                    <div class="num_off">5</div>
                    <div class="txt">
                      <p class="p1 fontChange">老实憨厚的子衿</p>
                    </div>
                  </div>
                </div>
                <div class="ranks">
                  <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                    <div class="num_off">6</div>
                    <div class="txt">
                      <p class="p1 fontChange">老实憨厚的子衿</p>
                    </div>
                  </div>
                </div>
                <div class="ranks">
                  <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                    <div class="num_off">7</div>
                    <div class="txt">
                      <p class="p1 fontChange">老实憨厚的子衿</p>
                    </div>
                  </div>
                </div>
                <div class="ranks">
                  <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                    <div class="num_off">8</div>
                    <div class="txt">
                      <p class="p1 fontChange">老实憨厚的子衿</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 国产原创结束 -->

      <!-- 音乐开始 -->
      <div class="music" id="#music">
        <div class="cartoon">
          <div class="block_area">
            <div class="block_title">
              <img class="block_pic" v-lazy="'/img/music.png'" alt="" />
              <span>音乐</span>
              <!-- <img class="hot_pic" v-lazy="'" alt=""> -->
              <p></p>
            </div>
            <BlockItem :data="res.bMusic" />
          </div>
          <div class="sub_banner">
            <div class="sub_tab">
              <div>
                <p>排行榜</p>
              </div>
            </div>
            <div class="container">
              <div class="tab_contain1">
                <div class="ranks">
                  <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                    <div class="num_on">1</div>
                    <img v-lazy="'/img/music_rank1.webp'" alt="" class="r_head" />
                    <div class="txt">
                      <p class="p1 fontChange r_1">【探窗】开口跪！单曲循环停不下来了……</p>
                      <p class="p2">综合得分: 123.7万</p>
                    </div>
                  </div>
                </div>
                <div class="ranks">
                  <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                    <div class="num_off">2</div>
                    <div class="txt">
                      <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                    </div>
                  </div>
                </div>
                <div class="ranks">
                  <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                    <div class="num_off">3</div>
                    <div class="txt">
                      <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                    </div>
                  </div>
                </div>
                <div class="ranks">
                  <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                    <div class="num_off">4</div>
                    <div class="txt">
                      <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                    </div>
                  </div>
                </div>
                <div class="ranks">
                  <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                    <div class="num_off">5</div>
                    <div class="txt">
                      <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                    </div>
                  </div>
                </div>
                <div class="ranks">
                  <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                    <div class="num_off">6</div>
                    <div class="txt">
                      <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                    </div>
                  </div>
                </div>
                <div class="ranks">
                  <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                    <div class="num_off">7</div>
                    <div class="txt">
                      <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                    </div>
                  </div>
                </div>
                <div class="ranks">
                  <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                    <div class="num_off">8</div>
                    <div class="txt">
                      <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 音乐结束 -->

      <!-- 舞蹈开始 -->
      <div class="dance" id="#dance">
        <div class="music">
          <div class="cartoon">
            <div class="block_area">
              <div class="block_title">
                <img class="block_pic" v-lazy="'/img/dancing.png'" alt="" />
                <span>舞蹈</span>
                <!-- <img class="hot_pic" v-lazy="'" alt=""> -->
                <p></p>
              </div>
              <BlockItem :data="res.bDance" />
            </div>
            <div class="sub_banner">
              <div class="sub_tab">
                <div>
                  <p>排行榜</p>
                </div>
              </div>
              <div class="container">
                <div class="tab_contain1">
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_on">1</div>
                      <img v-lazy="'/img/dance_r1.webp'" alt="" class="r_head" />
                      <div class="txt">
                        <p class="p1 fontChange r_1">她唱着 他乡遇故知</p>
                        <p class="p2">综合得分: 255.8万</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">2</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">3</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">4</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">5</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">6</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">7</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">8</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 舞蹈结束 -->

      <!-- 游戏开始 -->
      <div class="game" id="#game">
        <div class="music">
          <div class="cartoon">
            <div class="block_area">
              <div class="block_title">
                <img class="block_pic" v-lazy="'/img/game.png'" alt="" />
                <span>游戏</span>
                <!-- <img class="hot_pic" v-lazy="'" alt=""> -->
                <p></p>
              </div>
              <BlockItem :data="res.bGame" />
            </div>
            <div class="sub_banner">
              <div class="sub_tab">
                <div>
                  <p>排行榜</p>
                </div>
              </div>
              <div class="container">
                <div class="tab_contain1">
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_on">1</div>
                      <img v-lazy="'/img/game_r1.webp'" alt="" class="r_head" />
                      <div class="txt">
                        <p class="p1 fontChange r_1">我这张卡实在是太强了【水无月菌】</p>
                        <p class="p2">综合得分: 250.6万</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">2</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">3</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">4</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">5</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">6</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">7</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">8</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 游戏结束 -->

      <!-- 知识开始 -->
      <div class="knowledge" id="#knowledge">
        <div class="music">
          <div class="cartoon">
            <div class="block_area">
              <div class="block_title">
                <img class="block_pic" v-lazy="'/img/knowledge.png'" alt="" />
                <span>知识</span>
                <!-- <img class="hot_pic" v-lazy="'" alt=""> -->
                <p></p>
              </div>
              <BlockItem :data="res.bKnowledge" />
            </div>
            <div class="sub_banner">
              <div class="sub_tab">
                <div>
                  <p>排行榜</p>
                </div>
              </div>
              <div class="container">
                <div class="tab_contain1">
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_on">1</div>
                      <img v-lazy="'/img/game_r1.webp'" alt="" class="r_head" />
                      <div class="txt">
                        <p class="p1 fontChange r_1">我这张卡实在是太强了【水无月菌】</p>
                        <p class="p2">综合得分: 250.6万</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">2</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">3</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">4</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">5</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">6</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">7</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">8</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 知识结束 -->
      <!-- 时尚开始 -->
      <div class="fashion" id="#fashion">
        <div class="music">
          <div class="cartoon">
            <div class="block_area">
              <div class="block_title">
                <img class="block_pic" v-lazy="'/img/fashion.png'" alt="" />
                <span>时尚</span>
                <!-- <img class="hot_pic" v-lazy="'" alt=""> -->
                <p></p>
              </div>
              <BlockItem :data="res.bFashion" />
            </div>
            <div class="sub_banner">
              <div class="sub_tab">
                <div>
                  <p>排行榜</p>
                </div>
              </div>
              <div class="container">
                <div class="tab_contain1">
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_on">1</div>
                      <img v-lazy="'/img/dance_r1.webp'" alt="" class="r_head" />
                      <div class="txt">
                        <p class="p1 fontChange r_1">她唱着 他乡遇故知</p>
                        <p class="p2">综合得分: 255.8万</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">2</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">3</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">4</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">5</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">6</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">7</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">8</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 时尚结束 -->

      <!-- 科技开始 -->
      <div class="tech" id="#tech">
        <div class="music">
          <div class="cartoon">
            <div class="block_area">
              <div class="block_title">
                <img class="block_pic" v-lazy="'/img/sci.png'" alt="" />
                <span>科技</span>
                <!-- <img class="hot_pic" v-lazy="'" alt=""> -->
                <p></p>
              </div>
              <BlockItem :data="res.bTech" />
            </div>
            <div class="sub_banner">
              <div class="sub_tab">
                <div>
                  <p>排行榜</p>
                </div>
              </div>
              <div class="container">
                <div class="tab_contain1">
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_on">1</div>
                      <img v-lazy="'/img/dance_r1.webp'" alt="" class="r_head" />
                      <div class="txt">
                        <p class="p1 fontChange r_1">她唱着 他乡遇故知</p>
                        <p class="p2">综合得分: 255.8万</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">2</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">3</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">4</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">5</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">6</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">7</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">8</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 科技结束 -->
      <!-- 运动开始 -->
      <div class="sports" id="#sports">
        <div class="music">
          <div class="cartoon">
            <div class="block_area">
              <div class="block_title">
                <img class="block_pic" v-lazy="'/img/sports.png'" alt="" />
                <span>运动</span>
                <!-- <img class="hot_pic" v-lazy="'" alt=""> -->
                <p></p>
              </div>
              <BlockItem :data="res.bSports" />
            </div>
            <div class="sub_banner">
              <div class="sub_tab">
                <div>
                  <p>排行榜</p>
                </div>
              </div>
              <div class="container">
                <div class="tab_contain1">
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_on">1</div>
                      <img v-lazy="'/img/dance_r1.webp'" alt="" class="r_head" />
                      <div class="txt">
                        <p class="p1 fontChange r_1">她唱着 他乡遇故知</p>
                        <p class="p2">综合得分: 255.8万</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">2</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">3</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">4</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">5</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">6</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">7</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">8</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 运动结束 -->

      <!-- 汽车开始 -->
      <div class="car" id="#car">
        <div class="music">
          <div class="cartoon">
            <div class="block_area">
              <div class="block_title">
                <img class="block_pic" v-lazy="'/img/cars.png'" alt="" />
                <span>汽车</span>
                <!-- <img class="hot_pic" v-lazy="'" alt=""> -->
                <p></p>
              </div>
              <BlockItem :data="res.bCar" />
            </div>
            <div class="sub_banner">
              <div class="sub_tab">
                <div>
                  <p>排行榜</p>
                </div>
              </div>
              <div class="container">
                <div class="tab_contain1">
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_on">1</div>
                      <img v-lazy="'/img/dance_r1.webp'" alt="" class="r_head" />
                      <div class="txt">
                        <p class="p1 fontChange r_1">她唱着 他乡遇故知</p>
                        <p class="p2">综合得分: 255.8万</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">2</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">3</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">4</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">5</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">6</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">7</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">8</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 汽车结束 -->

      <!-- 生活开始 -->
      <div class="life" id="#life">
        <div class="music">
          <div class="cartoon">
            <div class="block_area">
              <div class="block_title">
                <img class="block_pic" v-lazy="'/img/life.png'" alt="" />
                <span>生活</span>
                <!-- <img class="hot_pic" v-lazy="'" alt=""> -->
                <p></p>
              </div>
              <BlockItem :data="res.bLife" />
            </div>
            <div class="sub_banner">
              <div class="sub_tab">
                <div>
                  <p>排行榜</p>
                </div>
              </div>
              <div class="container">
                <div class="tab_contain1">
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_on">1</div>
                      <img v-lazy="'/img/dance_r1.webp'" alt="" class="r_head" />
                      <div class="txt">
                        <p class="p1 fontChange r_1">她唱着 他乡遇故知</p>
                        <p class="p2">综合得分: 255.8万</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">2</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">3</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">4</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">5</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">6</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">7</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">8</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 生活结束 -->

      <!-- 美食开始 -->
      <div class="delicious" id="#delicious">
        <div class="music">
          <div class="cartoon">
            <div class="block_area">
              <div class="block_title">
                <img class="block_pic" v-lazy="'/img/delicious.png'" alt="" />
                <span>美食</span>
                <!-- <img class="hot_pic" v-lazy="'" alt=""> -->
                <p></p>
              </div>
              <BlockItem :data="res.bDelicious" />
            </div>
            <div class="sub_banner">
              <div class="sub_tab">
                <div>
                  <p>排行榜</p>
                </div>
              </div>
              <div class="container">
                <div class="tab_contain1">
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_on">1</div>
                      <img v-lazy="'/img/dance_r1.webp'" alt="" class="r_head" />
                      <div class="txt">
                        <p class="p1 fontChange r_1">她唱着 他乡遇故知</p>
                        <p class="p2">综合得分: 255.8万</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">2</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">3</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">4</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">5</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">6</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">7</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">8</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 美食结束 -->

      <!-- 美食开始 -->
      <div class="animal" id="#animal">
        <div class="music">
          <div class="cartoon">
            <div class="block_area">
              <div class="block_title">
                <img class="block_pic" v-lazy="'/img/animals.png'" alt="" />
                <span>动物圈</span>
                <!-- <img class="hot_pic" v-lazy="'" alt=""> -->
                <p></p>
              </div>
              <BlockItem :data="res.bAnimal" />
            </div>
            <div class="sub_banner">
              <div class="sub_tab">
                <div>
                  <p>排行榜</p>
                </div>
              </div>
              <div class="container">
                <div class="tab_contain1">
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_on">1</div>
                      <img v-lazy="'/img/dance_r1.webp'" alt="" class="r_head" />
                      <div class="txt">
                        <p class="p1 fontChange r_1">她唱着 他乡遇故知</p>
                        <p class="p2">综合得分: 255.8万</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">2</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">3</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">4</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">5</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">6</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">7</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">8</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 美食结束 -->

      <!-- 鬼畜开始 -->
      <div class="guichu" id="#guichu">
        <div class="music">
          <div class="cartoon">
            <div class="block_area">
              <div class="block_title">
                <img class="block_pic" v-lazy="'/img/guichu.png'" alt="" />
                <span>鬼畜</span>
                <!-- <img class="hot_pic" v-lazy="'" alt=""> -->
                <p></p>
              </div>
              <BlockItem :data="res.bGuichu" />
            </div>
            <div class="sub_banner">
              <div class="sub_tab">
                <div>
                  <p>排行榜</p>
                </div>
              </div>
              <div class="container">
                <div class="tab_contain1">
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_on">1</div>
                      <img v-lazy="'/img/dance_r1.webp'" alt="" class="r_head" />
                      <div class="txt">
                        <p class="p1 fontChange r_1">她唱着 他乡遇故知</p>
                        <p class="p2">综合得分: 255.8万</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">2</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">3</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">4</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">5</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">6</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">7</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">8</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 鬼畜结束 -->

      <!-- 资讯开始 -->
      <div class="news" id="#news">
        <div class="music">
          <div class="cartoon">
            <div class="block_area">
              <div class="block_title">
                <img class="block_pic" v-lazy="'/img/news.png'" alt="" />
                <span>资讯</span>
                <!-- <img class="hot_pic" v-lazy="'" alt=""> -->
                <p></p>
              </div>
              <BlockItem :data="res.bInfo" />
            </div>
            <div class="sub_banner">
              <div class="sub_tab">
                <div>
                  <p>排行榜</p>
                </div>
              </div>
              <div class="container">
                <div class="tab_contain1">
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_on">1</div>
                      <img v-lazy="'/img/dance_r1.webp'" alt="" class="r_head" />
                      <div class="txt">
                        <p class="p1 fontChange r_1">她唱着 他乡遇故知</p>
                        <p class="p2">综合得分: 255.8万</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">2</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">3</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">4</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">5</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">6</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">7</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">8</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 资讯结束 -->

      <!-- 娱乐开始 -->
      <div class="ent" id="#ent">
        <div class="music">
          <div class="cartoon">
            <div class="block_area">
              <div class="block_title">
                <img class="block_pic" v-lazy="'/img/entertain.png'" alt="" />
                <span>娱乐</span>
                <!-- <img class="hot_pic" v-lazy="'" alt=""> -->
                <p></p>
              </div>
              <BlockItem :data="res.bEnt" />
            </div>
            <div class="sub_banner">
              <div class="sub_tab">
                <div>
                  <p>排行榜</p>
                </div>
              </div>
              <div class="container">
                <div class="tab_contain1">
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_on">1</div>
                      <img v-lazy="'/img/dance_r1.webp'" alt="" class="r_head" />
                      <div class="txt">
                        <p class="p1 fontChange r_1">她唱着 他乡遇故知</p>
                        <p class="p2">综合得分: 255.8万</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">2</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">3</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">4</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">5</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">6</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">7</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">8</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 娱乐结束 -->

      <!-- 电影开始 -->
      <div class="movie" id="#movie">
        <div class="music">
          <div class="cartoon">
            <div class="block_area">
              <div class="block_title">
                <img class="block_pic" v-lazy="'/img/movies.png'" alt="" />
                <span>电影</span>
                <!-- <img class="hot_pic" v-lazy="'" alt=""> -->
                <p></p>
              </div>
              <BlockItem :data="res.bMovie" />
            </div>
            <div class="sub_banner">
              <div class="sub_tab">
                <div>
                  <p>排行榜</p>
                </div>
              </div>
              <div class="container">
                <div class="tab_contain1">
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_on">1</div>
                      <img v-lazy="'/img/dance_r1.webp'" alt="" class="r_head" />
                      <div class="txt">
                        <p class="p1 fontChange r_1">她唱着 他乡遇故知</p>
                        <p class="p2">综合得分: 255.8万</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">2</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">3</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">4</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">5</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">6</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">7</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">8</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 电影结束 -->

      <!-- 电视剧开始 -->
      <div class="teleplay" id="#teleplay">
        <div class="music">
          <div class="cartoon">
            <div class="block_area">
              <div class="block_title">
                <img class="block_pic" v-lazy="'/img/soap.png'" alt="" />
                <span>电视剧</span>
                <!-- <img class="hot_pic" v-lazy="'" alt=""> -->
                <p></p>
              </div>
              <BlockItem :data="res.bTeleplay" />
            </div>
            <div class="sub_banner">
              <div class="sub_tab">
                <div>
                  <p>排行榜</p>
                </div>
              </div>
              <div class="container">
                <div class="tab_contain1">
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_on">1</div>
                      <img v-lazy="'/img/dance_r1.webp'" alt="" class="r_head" />
                      <div class="txt">
                        <p class="p1 fontChange r_1">她唱着 他乡遇故知</p>
                        <p class="p2">综合得分: 255.8万</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">2</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">3</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">4</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">5</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">6</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">7</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">8</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 电视剧结束 -->

      <!-- 影视开始 -->
      <div class="movie_cul" id="#movie_cul">
        <div class="music">
          <div class="cartoon">
            <div class="block_area">
              <div class="block_title">
                <img class="block_pic" v-lazy="'/img/movie_cul.png'" alt="" />
                <span>影视</span>
                <!-- <img class="hot_pic" v-lazy="'" alt=""> -->
                <p></p>
              </div>
              <BlockItem :data="res.bMovieCul" />
            </div>
            <div class="sub_banner">
              <div class="sub_tab">
                <div>
                  <p>排行榜</p>
                </div>
              </div>
              <div class="container">
                <div class="tab_contain1">
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_on">1</div>
                      <img v-lazy="'/img/dance_r1.webp'" alt="" class="r_head" />
                      <div class="txt">
                        <p class="p1 fontChange r_1">她唱着 他乡遇故知</p>
                        <p class="p2">综合得分: 255.8万</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">2</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">3</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">4</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">5</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">6</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">7</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">8</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 影视结束 -->

      <!-- 纪录片开始 -->
      <div class="documentary" id="#documentary">
        <div class="music">
          <div class="cartoon">
            <div class="block_area">
              <div class="block_title">
                <img class="block_pic" v-lazy="'/img/documentary.png'" alt="" />
                <span>纪录片</span>
                <!-- <img class="hot_pic" v-lazy="'" alt=""> -->
                <p></p>
              </div>
              <BlockItem :data="res.bDocumentary" />
            </div>
            <div class="sub_banner">
              <div class="sub_tab">
                <div>
                  <p>排行榜</p>
                </div>
              </div>
              <div class="container">
                <div class="tab_contain1">
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_on">1</div>
                      <img v-lazy="'/img/dance_r1.webp'" alt="" class="r_head" />
                      <div class="txt">
                        <p class="p1 fontChange r_1">她唱着 他乡遇故知</p>
                        <p class="p2">综合得分: 255.8万</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">2</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">3</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">4</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">5</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">6</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">7</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                  <div class="ranks">
                    <div class="rank_face" @click="jumpToVideo('三天三夜','8707081')">
                      <div class="num_off">8</div>
                      <div class="txt">
                        <p class="p1 fontChange">【探窗】开口跪！单曲循环停不下来了……</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 纪录片结束 -->
      <!-- 侧边栏导航 -->
      <div class="aside_bar">
        <ul>
          <li v-for="(item, index) in res.asideList" :key="index">
            <a
              :href="'##' + item.target"
              :class="{ aside_on: aside_on == index }"
              @click="aside_on = index"
            >
              {{ item.name }}
            </a>
          </li>
          <li>
            <a href="##top" title="回到顶部"
              ><i class="el-icon-arrow-up" @click="aside_on = 100"></i
            ></a>
          </li>
        </ul>
      </div>

    <BFooter/>
    </div>
  </div>
</template>

<script>
import BHeader from "../components/BHeader.vue";
import BFooter from "../components/BFooter.vue";
import SwipeBanner from "../components/SwipeBanner.vue";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import BlockItem from "../components/BlockItem.vue";
export default {
  components: { SwipeBanner, Swiper, SwiperSlide, BlockItem, BHeader, BFooter },
  data() {
    return {
      l_t_cur: 1,
      aside_on: 100,
      my_subscribe: "",
      swiperOption: {
        parallax: true,
        loop: true,
        autoplay: true,
        pagination: {
          el: ".swiper-pagination",
          clickable:true,
        },
      },
      res:null
    };
  },
  methods: {
    getIndexData(){
      this.axios.get(`http://${location.host}/comics/data/index.json`).then((res)=>{
        this.res=res.data
      })
    },
    jumpToVideo(kw,vid){
      this.$router.push(`/video/${kw}/${vid}`)
    },
    indexScroll({target}) {
      // console.log(target.scrollTop);
      if(target.scrollTop<828){
        this.aside_on=100
      }
          if(target.scrollTop>828&&target.scrollTop<=1410){
            this.aside_on=0
          }else if(target.scrollTop>1410&&target.scrollTop<1924){
            this.aside_on=1
          }else if(target.scrollTop>=1924&&target.scrollTop<2560){
            this.aside_on=2
          }else if(target.scrollTop>=2560&&target.scrollTop<2940){
            this.aside_on=3
          }else if(target.scrollTop>=2940&&target.scrollTop<3518){
            this.aside_on=4
          }else if(target.scrollTop>=3510&&target.scrollTop<8146){
            this.aside_on=parseInt((target.scrollTop-3518)/450)+5}
          else if(target.scrollTop>=8146&&target.scrollTop<11280){
            this.aside_on=parseInt((target.scrollTop-8146)/450)+15
          }
          else{
            this.aside_on=100
          }
    },
  },
  mounted () {
    this.getIndexData();
  },
};
</script>
<!--200 549 220 -->

<style>
    .swiper-pagination-bullet{
      width: 10px !important;
      height: 10px !important;
      background: white !important;
      color: inherit;
      opacity: 1 !important;
    }
     .swiper-pagination-bullet-active{
      width: 15px !important;
      height: 15px !important;
      background-color:#1890ff  !important;
      color: inherit;
     }
</style>


<style lang="scss">
.index_box{
  width: 100vw;
  height: 100vh;
  overflow: scroll;
  overflow-x: hidden;
  &::-webkit-scrollbar{
    width: 10px;
  }
  &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/

        border-radius: 10px;

         -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

        background: #535353;

    }
    &::-webkit-scrollbar-track {/*滚动条里面轨道*/

        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

        border-radius: 10px;

        background: #EDEDED;

}
  // padding-bottom: 1000px;
}
.cate_banner {
  margin: 0 auto;
  width: 999px;
  height: 108px;
  box-sizing: border-box;
  padding: 20px 0;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  align-items: center;
  .cate_links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 200px;
    height: 68px;
    margin-right: 10px;
    .cate_link {
      text-align: center;
      img {
        display: block;
        width: 36px;
        height: 36px;
      }
    }
  }
  .cate_categories {
    border-left: rgb(231, 231, 231) 1px solid;
    padding-left: 10px;
    width: 549px;
    height: 68px;
    font-size: 14px;
    ul {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        width: 68px;
        height: 34px;
        white-space: nowrap;
      }
      span {
        display: block;
        text-align: center;
        margin-left: 2px;
        font-size: 12px;
        border-radius: 2px;
        color: white;
        padding: 2px;
        background-color: #73c9e5;
        width: 27px;
        height: 12px;
      }
    }
  }
  .cate_type {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 220px;
    height: 68px;
    font-size: 14px;
    padding-left: 10px;
    border-left: 1px solid rgb(231, 231, 231);
    .type_box {
      height: 34px;
      line-height: 34px;
      padding-right: 6px;
      img {
        vertical-align: middle;
        width: 25px;
        height: 25px;
        margin-right: 2px;
      }
    }
  }
}
.propaganda {
  width: 999px;
  height: 224px;
  margin: 0 auto;
  margin-bottom: 40px;
  display: flex;
}
.sub_banner {
  width: 265px;
  a {
    display: block;
    width: 265px;
    margin-bottom: 20px;
    font-size: 12px;
    line-height: 30px;
    height: 30px;
    text-align: center;
    color: #212121;
    background: #f4f4f4;
  }
  a:hover {
    color: #1e9dc7;
  }
  img {
    display: block;
    width: 265px;
  }
}
.block_area {
  width: 999px;
  margin: 0 auto;
  line-height: 36px;
  .block_title {
    margin-bottom: 16px;
  }
  .block_pic {
    width: 36px;
    height: 36px;
    margin-right: 6px;
  }
  .hot_pic {
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-right: 4px;
  }
  span {
    display: inline-block;
    height: 38px;
    font-size: 20px;
    margin-right: 20px;
  }
  p {
    display: inline-block;
    font-size: 12px;
  }
  .block_item {
    width: 710px;
    height: 172px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-right: 20px;
    .video_container {
      position: relative;
      width: 170px;
      height: 172px;
      margin-bottom: 30px;
      // box-sizing: border-box;
    }
    img:first-child {
      border-radius: 2px;
      display: block;
      width: 100%;
    }
    .title {
      margin: 10px 0 8px;
      min-height: 20px;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 100%;
      display: block;
      font-size: 14px;
      color: #212121;
      line-height: 20px;
      &:hover {
        cursor: pointer;
        color: #1890ff;
      }
    }
    .up {
      font-size: 12px;
      line-height: 16px;
      color: #999;
    }
  }
}
.fontChange{
  &:hover {
        transition: .3s;
        cursor: pointer;
        color: #1890ff !important;
      }
}
.race {
  width: 999px;
  margin: 0 auto;
  justify-content: space-between;
  display: flex;
  .sub_only_img {
    display: block;
    margin-top: 50px;
  }
  & .img:hover ~ .video_info .replay {
    visibility: visible;
  }
  & .img:hover ~ .video_info .info,
  & .img:hover ~ .video_info .awe_num {
    visibility: hidden;
  }
}
.ads {
  position: relative;
  width: 999px;
  margin: 40px auto 40px auto;
  img {
    display: block;
  }
  .ad {
    width: 100%;
    height: 82.66px;
  }
  .ad_icon {
    position: absolute;
    width: 38px;
    height: 22px;
    left: 0;
    bottom: 0px;
  }
}
.live {
  width: 999px;
  margin: 0 auto;
  justify-content: space-between;
  display: flex;
  margin-bottom: 40px;
  .block_item {
    min-height: 420px;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .live_text {
    margin-top: 10px;
    display: flex;
    height: 64px;

    img {
      width: 36px;
      height: 36px;
      border-radius: 50% !important;
    }
    .text {
      padding-left: 6px;
      width: 130px;
      height: 64px;
      overflow: hidden;
      a {
        display: block;
      }
      p {
        line-height: 16px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .name {
        line-height: 20px;
        font-size: 14px;
        color: #212121;
        height: 20px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .desc,
      .tag {
        font-size: 12px;
        color: #999;
      }
      .tag {
        margin-top: 8px;
      }
      .desc {
        line-height: 18px;
        margin-top: 2px;
        height: 18px;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
}

.sub_banner {
  box-sizing: border-box;
  width: 100%;
  height: 36px;

  // background-color: #000;
  .sub_tab {
    display: flex;
    margin-bottom: 16px;
    .tab {
      margin-right: 12px;
      line-height: 22px;
      font-size: 14px;
      border-bottom: 1px solid transparent;
      &:hover {
        cursor: pointer;
      }
    }
    .tab_on {
      color: #00a1d6;
      border-bottom: 1px solid #00a1d6;
    }
  }

  .container {
    width: 100%;
    display: flex;
    flex-direction: column;
    .ranks {
      display: flex;
      width: 100%;
      justify-content: space-between;
      margin-bottom: 16px;
      .rank_face {
        width: 100%;
        display: flex;
        align-items: center;
        height: 44px;
        .num_on {
          width: 18px;
          line-height: 18px;
          text-align: center;
          height: 18px;
          margin-right: 12px;
          font-size: 14px;
          color: #fff;
          background-color: #00a1d6;
        }
        .num_off {
          width: 18px;
          line-height: 18px;
          text-align: center;
          height: 18px;
          margin-right: 12px;
          font-size: 14px;
          color: #999;
          background-color: #fff;
        }
        .r_head {
          display: block;
          width: 44px;
          height: 44px;
          margin-right: 12px;
        }
        .p1 {
          width: 102px;
          font-size: 14px;
          margin-right: 12px;
        }
        .p2 {
          color: #505050;
          font-size: 12px;
        }
      }
      .people_num {
        margin-top: 5px;
        width: 60px;
        font-size: 12px;
        color: #999;
      }
    }
    .tab_contain1,
    .tab_contain2,
    .tab_contain3 {
      min-height: 420px;
    }
    .subscribe {
      .my_sub {
        text-align: center;
        color: #505050;
      }
    }
    .swiper {
      width: 265px;
      margin-top: 16px;
      .swiper_img {
        width: 265px;
      }
    }
    .s_slide {
      position: relative;
    }
    .s_text {
      position: absolute;
      width: 265px;
      height: 19px;
      bottom: 10px;
      left: 12px;
      font-size: 14px;
      color: white;
    }
    .swiper-pagination {
      text-align: right;
      padding-right: 10px;
    }
  }
}

.video_info {
  position: absolute;
  padding: 4px;
  top: 37%;
  height: 34px;
  box-sizing: border-box;
  width: 170px;
  z-index: 20;
  color: white !important;
  vertical-align: middle;
  background: linear-gradient(to bottom, transparent, black);

  .awe_num {
    line-height: 20px;
    padding-right: 4px;
  }
  img {
    display: inline-block !important;
    // vertical-align: middle;
    width: 20px !important;
    height: 20px !important;
  }
  .info {
    line-height: 20px;
    padding-right: 4px;
  }
  .replay {
    visibility: hidden;
    display: block;
    position: absolute;
    right: 4%;
    bottom: 7px;
  }
}
.cartoon {
  width: 999px;
  height: 430px;
  margin: 0 auto;
  justify-content: space-between;
  display: flex;
  margin-bottom: 40px;
  .sub_only_img {
    display: block;
    margin-top: 50px;
  }
  & .img:hover ~ .video_info .replay {
    visibility: visible;
  }
  & .img:hover ~ .video_info .info,
  & .img:hover ~ .video_info .awe_num {
    visibility: hidden;
  }
  .block_item {
    margin-right: 20px;
  }
  .sub_banner {
    .ranks {
      margin: 0;
    }
    .rank_face {
      height: auto !important;
      margin-bottom: 18px;
      .txt {
        width: auto;
        .p1 {
          width: 235px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        .r_1 {
          width: 102px;
          height: 40px;
          white-space: unset;
        }
        .p2 {
          margin-top: 5px;
        }
      }
    }
    .sub_tab {
      height: 38.5px;
      line-height: 38.5px;
      margin-bottom: 16px;
      p {
        line-height: 28px;
        font-size: 20px;
      }
    }
    img {
      width: 112px !important;
      height: 63px !important;
    }
  }
}
.origin {
  .title {
    margin-bottom: 0 !important;
    line-height: 33px !important;
  }
  .video_container {
    margin-bottom: 10px !important;
  }
}

.up img.up_gray {
  width: 16px !important;
  height: 16px !important;
  display: inline-block !important;
}
.pos_box {
  // position: fixed;
  position: relative;
}
.aside_bar {
  padding: 10px 0 10px 0;
    z-index: 97;
    position: fixed;
    top: 16vh;
    right: 5vw;
    border-radius: 10px;
    border: 1px solid #e7e7e7;
    background-color: white;
  .aside_on {
    background-color: #00a1d6;
    color: #fff;
  }
  a {
    display: block;
    width: 54px;
    height: 24px;
    font-size: 12px;
    line-height: 24px;
    text-align: center;
    color: #505050;
    transition: 0.1s ease-in;
    &:hover {
      background-color: #00a1d6;
      color: #fff;
    }
  }
}
</style>